<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="../css/reset.css" />
  <style>
    .w {
      width: 1126px;
      margin: 0 auto;
    }

    .searchBar {
      width: 600px;
      height: 45px;
      border: 1px solid #333;
      margin-top: 50px;
      border-radius: 4px;
      display: flex;
      position: relative;
    }

    .searchCon {
      flex: 1;
      outline: none;
      height: 45px;
      border: none;
      text-indent: 10px;
    }

    .searchBtn {
      width: 80px;
      background-color: #6ff;
      height: 45px;
      text-align: center;
      line-height: 45px;
      border-radius: 0 4px 4px 0px;
    }

    .searchList {
      position: absolute;
      left: -1px;
      top: 44px;
      width: -webkit-calc(100% - 79px);
      line-height: 40px;
      text-indent: 10px;
      border: 1px solid #333;
      border-top: 0;
      box-sizing: border-box;
      background-color: #fff;
      display: none;
    }
  </style>
</head>

<body>
  <!-- .searchBar>.searchCon+a.searchBtn+ul.searchList>li*4{$$} -->
  <div class="wrapSearch w">
    <div class="searchBar">
      <input class="searchCon" type="text">
      <a href="" class="searchBtn"></a>
      <ul class="searchList">
        <li><a href="">01</a></li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
      </ul>
    </div>
  </div>
</body>
<script>
  // https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34647,34441,31254,34550,33848,34600,34584,34092,34505,26350,34627,34556,34691,34683&wd=h5&req=2&csor=2&pwd=h&cb=jQuery110206980964932320619_1631784744240&_=1631784744242

  // 简化
  // https://www.baidu.com/sugrec?prod=pc&wd=h5&cb=fn

  // 参数
  // prod=pc  pc端
  // wd=h5   搜索的关键词
  // cb=fn   接口返回的函数名 

  // 数据
  // {
  // 	g:[]  存放搜索的数据,
  // 	q:  搜索的关键词
  // }

  var searchCon = document.getElementsByClassName("searchCon")[0];
  var searchList = document.getElementsByClassName("searchList")[0];

  var start = Date.now();
  var now = Date.now();

  searchCon.oninput = function () {
    var key = this.value;
    var now = Date.now();
    if (now - start > 1000) { //每次输入 当前时间 - 起始时间 > 间隔时间
      // 1. 搜索时 根据搜索的数据 动态请求 ?
      // 通过动态创建script =>  配置src => 当script放到页面时会请求
      var script = document.createElement("script");
      script.src = `https://www.baidu.com/sugrec?prod=pc&wd=${key}&cb=fn`;

      // 通过动态创建script =>  配置src => 当script放到页面时会请求
      document.body.appendChild(script);

      //onload 等页面所有内容加载完毕(文档(html),css,js,img,video,字体图标)之后触发
      script.onload = function () {
        this.remove();
      }
      start = now;
    }
  }

  function fn(data) {
    var { g: list } = data;
    // console.log(list);
    if (list) {
      var html = "";
      list.forEach(item => {
        console.log(item);
        var { q } = item;
        html += `<li><a href="">${q}</a ></li >`
      });
      searchList.innerHTML = html;
      searchList.style.display = "block"
    } else {
      searchList.innerHTML = "";
      searchList.style.display = "none"
    }
  }



</script>
<!-- <script src="https://www.baidu.com/sugrec?prod=pc&wd=h5&cb=fn"></script> -->

</html>